<template>
<div>
  <p v-if='isReadOnlyPage === true'>{{ cityValue }}</p>
  <div v-else class="p-relative">
    <a-input v-model="cityValue"></a-input>
    <a-cascader class="city-select" :options="cityOptions" expandTrigger="hover" @change="onChange" placeholder="请选择" />
  </div>
</div>
</template>
<script>
import cityOptions from '@/util/city'
export default {
  name: 'city',
  props: ['value', 'values', 'isReadOnlyPage', 'mode', 'isDisabled', 'keys', 'stepAggsIsAbled', 'isResume'],
  model: {
    prop: 'value',
    event: 'change'
  },
  data () {
    return {
      cityOptions,
      text: '',
      cityValue: ''
    }
  },
  watch: {
    value (newValue) {
      this.cityValue = newValue
    }
  },
  created () {
  },
  methods: {
    onChange (value, selectedOptions) {
      this.text = selectedOptions.map(o => o.label).join('-')
      this.$emit('change', this.text)
    }
  }
}
</script>
<style lang="stylus" scoped>
.p-relative
  position relative!important
  .city-select
    position absolute!important
    width 100%!important
    height 100%!important
    opacity 0!important
    left 0
    top 0
</style>
